<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :pagination="false" :requestApi="getSwiperList">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">添加轮播图</el-button>
        <el-button type="danger" @click="deleteSwiper(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
      </template>
      <template #opera="{ row }">
        <!-- <el-button link :icon="EditPen" type="primary" @click="opera(row)">编辑</el-button> -->
        <el-button link :icon="Delete" type="primary" @click="deleteSwiper([row.id])">删除</el-button>
      </template>
      <template #origin="{ row }">
        <span v-show="row.origin == 1">手机端</span>
        <span v-show="row.origin == 2">微信小程序</span>
        <span v-show="row.origin == 3">百度小程序</span>
        <span v-show="row.origin == 4">电脑端</span>
      </template>
      <template #cover="{ row }">
        <el-image fit="scale-down" :src="url(userInfo.prefix, row.cover)"></el-image>
      </template>
    </ProTable>
    <swiper-dialog ref="swiperRef"></swiper-dialog>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { onBeforeMount, ref } from "vue";
import { Delete } from "@element-plus/icons-vue";
import swiperDialog from "../components/swiperDialog.vue";
import { GetArticleList, getSwiperList, createSwiper, deleteSwiperList } from "@/api/modules/homeSwiper";
import { useHandleData } from "@/hooks/useHandleData";
import { useUserStore } from "@/stores/modules/user";
import { url } from "@/utils/index";

const { userInfo } = useUserStore();

const deleteSwiper = async (ids: any) => {
  await useHandleData(deleteSwiperList, { ids }, "删除所选内容");
  await proRef.value?.clearSelection();
  proRef.value?.getTableList();
};

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "selection", width: 80 },
  { prop: "sort", label: "排序值" },
  { prop: "origin", label: "端口" },
  { prop: "cover", label: "封面" },
  { prop: "link", label: "跳转地址" },
  { prop: "opera", label: "操作" }
];

const swiperRef = ref<InstanceType<typeof swiperDialog> | null>();
const opera = (row: any) => {
  const params: any = {
    row: row ? row : { sort: 1, origin: 1, cover: "", jumpType: 0 },
    api: createSwiper,
    getTable: proRef.value?.getTableList,
    articleList: artList.value
  };
  swiperRef.value?.acceptParams(params);
};

const artList = ref();
const getArt = async () => {
  const { data } = await GetArticleList();
  artList.value = data;
};

onBeforeMount(() => {
  Promise.all([getArt()]);
});
</script>

<style></style>
